<template>
	<i-picker :value="valueData" :list="monthList" v-model="modelValue" type="timeDate"
		@confirm="pickerChange"></i-picker>
	<view class="staff_data">
		<view class="date" @click="modelValue = true">
			<text>{{selectStr}}</text>
			<image src="../../static/images/more_icon.png"></image>
		</view>
		<i-scrollList @more="more" height="calc(100vh - 92rpx)" :total="pageData.total"
			:pageTotal="pageData.list.length">
			<i-card bottom="20rpx" v-for="(item,index) in pageData.list" :key="index">
				<view class="card_top">
					<image :src="item.userHeadUrl||'../../static/images/head2@2x.png'" mode=""></image>
					<view class="card_t">
						<text class="name">{{item.staffName}}</text>
						<text>{{item.staffMobile}}</text>
					</view>
				</view>
				<view class="grid">
					<view class="grid_item" @click="tohxDetail(item, 'hxdd')">
						<text class="price">{{item.useAmount|| 0}}</text>
						<text>核销订单（{{item.useOrderCount || 0}}）</text>
					</view>
					<view class="grid_item" @click="tohxDetail(item, 'hxsgdd')">
						<text class="price">{{item.useBuilderAmount || 0}}</text>
						<text>核销施工订单（{{item.useBuilderCount || 0}}）</text>
					</view>
					<view class="grid_item" @click="tohxDetail(item, 'kddd')">
						<text class="price">{{item.merOrderAmount || 0}}</text>
						<text>开单订单（{{item.merOrderCount || 0}}）</text>
					</view>
					<view class="grid_item" @click="tohxDetail(item, 'kdsgdd')">
						<text class="price">{{item.merOrderBuilerAmount || 0}}</text>
						<text>开单施工订单（{{item.merOrderBuilerCount || 0}}）</text>
					</view>
					<view class="grid_item" @click="tohxDetail(item, 'tcje')">
						<text class="price">{{item.commissionAmount || 0}}</text>
						<text>提成金额</text>
					</view>
				</view>
				<!-- <view class="butons" @click="toDetail(item)">查看提成详情</view> -->
			</i-card>
		</i-scrollList>
	</view>
</template>

<script lang="ts" setup>
	import {
		// listMerClerk,
		getStoreManagementStaffReport
	} from '../../api/store'
	import {
		onShow,
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue'
	import { getCountDays, navTo } from '../../utils/common';
	import useStore from '../../stores/index'
	const modelValue = ref(false)
	const selectStr = ref('请选择')
	const endDate = ref('')
	const store = useStore()
	const monthList = ref([[], []])
	const valueData = ref<any[]>([])
	const type = ref('')
	const formData = reactive<any>({
		countMonth: '',
		tyjPageNum: 1,
		tyjPageSize: 30,
	})
	const pageData = reactive({
		list: [],
		total: 0
	})
	
	const userInfo = computed(()=> {
		return store.userInfo
	})

	onLoad((option) => {
		if (option.type) {
			type.value = option.type
		}
		console.log(type.value, 'type.valuetype.value');
	})
	onReady(() => {
		uni.setNavigationBarTitle({
			title: type.value ? '我的提成' : '员工数据'
		})
	})

	// const toDetail = (i : { staffUserId : string }) => {
	// 	navTo(`/pagesA/views/commission_detail?id=${i.staffUserId}&countMonth=${formData.countMonth}`, 'navigateTo')
	// }

	const more = () => {
		formData.tyjPageNum++
		getPageList()
	}

	const getPageList = async () => {
		if(type.value) {
			formData.clerkId = userInfo.value.userId
		}
		const data = await getStoreManagementStaffReport(formData)
		pageData.list = data.rows
		pageData.total = data.total
	}

	const getDate = () => {
		const date = new Date().getFullYear()
		const month = new Date().getMonth() + 1
		selectStr.value = date + '年' + month + '月'
		formData.countMonth = date + '-' + (month + '').padStart(2, '0')
		endDate.value = formData.countMonth + '-' + getCountDays(month, date)
		valueData.value = [{
			label: date + '', value: 0
		}, { label: month + '', value: month }]

		for (let i = date; i > date - 50; i--) {
			monthList.value[0].push({
				label: i + '',
				value: date - i
			})
		}
		for (let v = 1; v < 13; v++) {
			monthList.value[1].push({
				label: v + '',
				value: v
			})
		}
	}

	const tohxDetail = (item : { staffUserId : string }, type : string) => {
		switch (type) {
			case 'hxdd':
				navTo(`/pagesA/views/staff_order_detail?id=${item.staffUserId}&type=hxdd&startDate=${formData.countMonth}&endDate=${endDate.value}`, 'navigateTo')
				break;
			case 'hxsgdd':
				navTo(`/pagesA/views/staff_order_detail?id=${item.staffUserId}&type=hxsgdd&startDate=${formData.countMonth}&endDate=${endDate.value}`, 'navigateTo')
				break;
			case 'kddd':
				navTo(`/pagesA/views/staff_order_detail?id=${item.staffUserId}&type=kddd&startDate=${formData.countMonth}&endDate=${endDate.value}`, 'navigateTo')
				break;
			case 'kdsgdd':
				navTo(`/pagesA/views/staff_order_detail?id=${item.staffUserId}&type=kdsgdd&startDate=${formData.countMonth}&endDate=${endDate.value}`, 'navigateTo')
				break;
			case 'tcje':
				navTo(`/pagesA/views/commission_detail?staffUserId=${item.staffUserId}&countMonth=${formData.countMonth}`, 'navigateTo')
				break;
			default:
				break;
		}
	}

	const pickerChange = (e : any) => {
		valueData.value = e
		selectStr.value = e[0].label + '年' + e[1].label + '月'
		formData.countMonth = e[0].label + '-' + (e[1].label + '').padStart(2, '0')
		endDate.value = formData.countMonth + '-' + getCountDays(e[1].label, e[0].label)
		getPageList()
	}
	onMounted(() => {
		getDate()
		getPageList()
	})
</script>

<style lang="scss" scoped>
	.staff_data {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.card_top {
			@include flexR;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #f3f4f5;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 64rpx;
				margin-right: 24rpx;
			}

			text {
				@include dfont(28rpx);
				color: #8E8E93;
			}

			.card_t {
				@include flexC;

				.name {
					@include titlefont(28rpx);
					margin-bottom: 8rpx;
				}

			}
		}

		.grid {
			margin-top: 32rpx;
			@include flexRS;
			flex-wrap: wrap;
			// border-bottom: 1rpx solid #F0F0F2;

			.grid_item {
				width: 48%;
				@include flexC;
				@include dfont(26rpx);
				color: #A0A0AD;
				margin-bottom: 32rpx;

				.price {
					@include dprice(36rpx);
					margin-bottom: 16rpx;
				}
			}
		}

		.butons {
			width: 100%;
			text-align: center;
			@include titlefont(28rpx);
			color: #5C6D80;
			margin-top: 32rpx;
		}

		.date {
			margin: 40rpx 0 32rpx 32rpx;
			@include titlefont(28rpx);
			@include flexR;

			image {
				width: 20rpx;
				height: 12rpx;
				margin-left: 8rpx;
			}
		}
	}
</style>